@import "function";
@import "variable";

@mixin ellipsis() {
  overflow: hidden;
  white-space: nowrap;
  word-break: keep-all;
  text-overflow: ellipsis;
}

@mixin translate($left: -50%, $top: -50%) {
  transform: translate($left, $top);
}

@mixin translateX($left: 0) {
  transform: translateX($left);
}

@mixin translateY($top: 0) {
  transform: translateY($top);
}

@mixin middle-center($position: absolute) {
  position: $position;
  left: 50%;
  top: 50%;
  @include translate(-50%, -50%);
}

@mixin middle-center-x($position: absolute) {
  position: $position;
  left: 50%;
  @include translateX(-50%);
}

@mixin middle-center-y($position: absolute) {
  position: $position;
  top: 50%;
  @include translateY(-50%);
}

@mixin multi-ellipsis($line-number: 2) {
  display: -webkit-box;
  overflow: hidden;
  white-space: normal;
  text-overflow: ellipsis;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: $line-number;
}

@mixin btn {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: auto;
  margin-right: auto;
  width: rpx(500);
  height: rpx(76);
  line-height: rpx(76);
  text-align: center;
  font-size: rpx(28);
  color: #fff;
  border-radius: rpx(38);
  box-shadow: 0 rpx(2) rpx(5) rgba(92, 163, 241, 0.32);
  background-color: $main-color;
  span {
    margin-right: rpx(10);
    font-weight: bold;
  }
  img {
    margin-right: rpx(10);
    width: rpx(40);
    height: rpx(40);
  }
}
